<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<block v-else>
		<view class="container">
			<view class="address_block">
				<view class="item1">
					<textarea name="" v-model="addressIMEI" id="" cols="30" rows="10" maxlength="50" placeholder="输入电话地址等信息智能识别">
					</textarea>
						<view class="item_btn" @click="addressFun()">
							智能识别
						</view>
				</view>
			</view>
			<view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						客户姓名
					</view>
					<input type="text" v-model="trueName" placeholder="请填写客户姓名" maxlength="10"/>
				</view>
				<view class="item">
					<view class="item_title">
						<span>*</span>
						联系电话
					</view>

					<input type="tel" v-model="phone" placeholder="请填写联系电话" maxlength="20" />
				</view>
			</view>

			<view class="block">
				<view class="item">
					<view class="item_title">
						<span>*</span>
						所在地区
					</view>
					<view class="item_city" @click="showCity = true">
						<picker mode="region" :value="region" @change="chooseAddressInfo">
							<view class="picker" :style="{color:addressinfo=='请选择'?'#b9b9b9':'#141414'}">
								{{addressinfo}}
							</view>
						</picker>
						<!-- <input type="text" v-model="cityStr" disabled placeholder="选择地区" /> -->
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721889557290214.png"></image>
					</view>
				</view>

				<view class="item1">
					<view class="item_title">
						<span>*</span>
						详细地址
					</view>
					<textarea name="" v-model="address" id="" cols="30" rows="10" maxlength="50" placeholder="请输入客户的详细地址"></textarea>
				</view>
			</view>

			<view class="block">
				<view class="item">
					所属公司
					<input type="text" v-model="company" placeholder="请填写公司名称" />
				</view>
				<view class="item">
					职位名称
					<input type="text" v-model="position" placeholder="请填写职位名称" />
				</view>
			</view>
			<view style="height: 160rpx;"></view>
			<view class="saveBox">
				<view class="btn saveBtn" @click="submit">保存</view>
			</view>
		</view>
		<!-- <u-picker mode="region" v-model="showCity" :area-code='["13", "1303", "130304"]'></u-picker> -->
		<!-- <u-picker :show="showCity" mode="region" @cancel="showCity = false" immediateChange ref="uPicker"
			@change="changeHandler" @confirm="setCity"></u-picker> -->
	</block>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			trueName: '',
			phone: '',
			company: '',
			address: '',
			position: '',
			showCity: true,
			region:[],
			addressIMEI:''
		};
	},

	computed: {
		addressinfo(){
			let list = this.region;
			if (list[0] == list[1]) {
				list.splice(0,1)
			}
			return list.join('') || '请选择';
		},
	},
	watch: {},

	onReady() { },

	async onLoad(e) {
		this.load = true;
	},

	async onShow() { },

	onUnload() { },

	methods: {
		async addressFun(){
			if(!this.addressIMEI){
				this.$pv.msg('请输入内容')
				return
			}
			let res = await this.$api.post('/Common/GetAddress',{address:this.addressIMEI})
			if(res.data.code==200){
				let con = res.data.data[0]
				this.trueName = con.name
				this.address = con.address
				this.phone = con.mobile[0]
				let site = con.xzq
				this.region = [site.province,site.city,site.district]
			}else{
				this.$pv.msg(res.data.message)
			}
			
		},
		async submit() {
			let that = this
			if (that.trueName == '') {
				that.$pv.msg("请输入客户姓名")
				return
			}
			if (that.phone == '') {
				that.$pv.msg("请输入联系方式")
				return
			}
			if (that.region == 0) {
				that.$pv.msg("请选择地区")
				return
			}
			if (that.address == '') {
				that.$pv.msg("请输入详细地址")
				return
			}
			const res = await this.$api.post('/Customer/Add', {
				TrueName: that.trueName,
				Phone: that.phone,
				Province: that.region[0],
				City: that.region[1],
				Area: that.region[2],
				Address: that.address,
				Tag: that.position,	// 职位名称？
				Company:that.company
			});

			if (res.code == 0) {
				that.$pv.msg("添加成功")
				setTimeout(() => {
					uni.navigateBack();
				}, 800);
			} else {
				uni.showToast({
					title: "添加失败",
					icon: 'error',
					duration: 2000
				})
			}

		},
		// 选择地区
		chooseAddressInfo(e) {
			console.log('picker发送选择改变，携带值为', e)
			this.region = e.detail.value;
		},
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

.container {
	padding: 20rpx 0 0 0;
	display: flex;
	flex-direction: column;
	.address_block{
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 24rpx;
		.item1 {
			position: relative;
			.item_btn{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
				border-radius: 44rpx;
				font-size: 26rpx;
				color: #fff;
				padding: 6rpx 14rpx;
			}
			.item_title {
				font-size: 32rpx;
				color: #333333;
				margin: 30rpx 0 20rpx 0;
				
		
				span {
					font-size: 32rpx;
					color: #FF6030;
				}
			}
		
			textarea {
				width: 100%;
				box-sizing: border-box;
				height: 300rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #000;
				padding: 30rpx 20rpx;
				padding-bottom: 70rpx;
				margin-bottom: 30rpx;
				
			}
		}
	}
	.block {
		width: 100%;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding-left: 30rpx;

		.item {
			width: 100%;
			height: 107rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E4E4E4;

			.item_title {
				font-size: 32rpx;
				color: #333333;

				span {
					font-size: 32rpx;
					color: #FF6030;
				}
			}

			.item_city {
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 44rpx;
					margin: 0 15rpx 0 5rpx;
				}
			}

			input {
				font-size: 32rpx;
				color: #000;
				width: 76%;
				text-align: right;
				margin-right: 4%;
			}
		}

		.item:last-child {
			border-bottom: none;
		}

		.item1 {
			.item_title {
				font-size: 32rpx;
				color: #333333;
				margin: 30rpx 0 20rpx 0;

				span {
					font-size: 32rpx;
					color: #FF6030;
				}
			}

			textarea {
				width: 90%;
				height: 202rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #000;
				padding: 30rpx 20rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.saveBox {
		position: fixed;
		width: 100%;
		height: 158rpx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding: 20rpx 50rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		z-index: 99;
		.saveBtn {
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
}
</style>